<template>
	<div>
		<div class="text-#86909C text-12px flex items-center">
			<p class="mr-20px pt-10px pb-10px pr-20px pl-20px rounded-8px cursor-pointer"
				:class="{ 'bg-#114CEE text-#ffffff': selected === '基础委托' }" @click="selected = '基础委托'">基础委托</p>
			<p class=" pt-10px pb-10px pr-20px pl-20px rounded-8px cursor-pointer"
				:class="{ 'bg-#114CEE text-#ffffff': selected === '止盈止损委托' }" @click="selected = '止盈止损委托'">止盈止损委托</p>
		</div>
		<div>
			<el-table :data="tableData" style="width: 100%">
				<el-table-column prop="time" label="时间">
					<template #default="scope">
						<div class="pt-10px pb-10px flex items-center">
							<span class="text-[#000000] text-[14px] font-[400]">{{ scope.row.time }}</span>
						</div>
					</template>
				</el-table-column>
				<el-table-column prop="coin" label="合约">
					<template #default="scope">
						<div class="pt-10px pb-10px">
							<p class="text-[#000000] text-[14px] font-[300] mb-4px">{{ scope.row.coin }}</p>
							<p class="text-#114CEE text-12px bg-#E9F2FF rounded-4px w-36px text-center box-border">
								{{ scope.row.contract }}
							</p>
						</div>
					</template>
				</el-table-column>
				<el-table-column prop="methods" label="类型" :filters="[
					{ text: '限价委托', value: '限价委托' },
					{ text: '市价委托', value: '市价委托' }
				]" :filter-multiple="false" filter-class-name="filter-person-spot-tables" :filter-method="filterMethods">
					<template #filter-icon>
						<el-icon class="ml-6px">
							<CaretBottom />
						</el-icon>
					</template>
				</el-table-column>
				<el-table-column prop="to" label="方向"
				:filters="[
					{ text: '开多', value: 'true' },
					{ text: '开空', value: 'false' }
				]" :filter-multiple="false" filter-class-name="filter-person-spot-tables" :filter-method="filterTo">
					<template #filter-icon>
						<el-icon class="ml-6px">
							<CaretBottom />
						</el-icon>
					</template>
					<template #default="scope">
						<div class="pt-10px pb-10px"
							:class="{ 'text-#07B175': scope.row.to, 'text-#F34E5F': !scope.row.to }">
							{{ (scope.row.to ? '开多' : '开空') }}
						</div>
					</template>
				</el-table-column>
				<el-table-column prop="price" label="价格">
				</el-table-column>
				<el-table-column prop="sum" label="数量">
				</el-table-column>
				<el-table-column prop="sumTrade" label="成交数量">
				</el-table-column>
				<el-table-column prop="triggerPrice" label="触发条件">
					<template #default="scope">
						<div>
							<div v-if="scope.row.triggerMethods">
								<p>{{ scope.row.triggerMethods }}</p>
								<p>{{ scope.row.triggerPrice }}</p>
							</div>
							<div v-else>
								<p>--/--</p>
							</div>
						</div>
					</template>
				</el-table-column>
				<el-table-column prop="address" label="操作" align="right">
					<template #header>
						<div class="text-#3E5BF2">
							全撤
						</div>
					</template>
					<template #default="scope">
						<div class="text-16px text-#3E5BF2">
							<el-icon>
								<Delete />
							</el-icon>
						</div>
					</template>
				</el-table-column>
			</el-table>
		</div>
	</div>
</template>
<script setup lang="ts">
const selected = ref<any>('基础委托');
const tableData = ref<any[]>([
	{
		time: '2023-04-02 12:00:01',
		coin: 'BTC/USDT',
		contract: '永续',
		methods: '限价委托',
		to: false,
		price: '1.0000',
		sum: '0.00 USDT',
		sumTrade: '0.000 USDT',
		triggerMethods: '标记价格',
		triggerPrice: '<=98,000.00'
	},
	{
		time: '2023-04-02 12:00:01',
		coin: 'BTC/USDT',
		contract: '永续',
		methods: '限价委托',
		to: true,
		price: '1.0000',
		sum: '0.00 USDT',
		sumTrade: '0.000 USDT',
		triggerMethods: '',
		triggerPrice: ''
	},
	{
		time: '2023-04-02 12:00:01',
		coin: 'BTC/USDT',
		contract: '永续',
		methods: '限价委托',
		to: true,
		price: '1.0000',
		sum: '0.00 USDT',
		sumTrade: '0.000 USDT',
		triggerMethods: '标记价格',
		triggerPrice: '<=98,000.00'
	}
])

const filterMethods = (value: string, row: any) => {
	return row.methods === value
}

const filterTo = (value: boolean, row: any) => {
	return row.to === value
}
</script>
<style lang="scss">
.filter-person-spot-tables {

	.el-table-filter__list {
		padding: 0;

		.is-active {
			color: #fff;
		}
	}
}
</style>
